<template>
  <v-layout type="main">
    <!-- <p class="page-title">模型管理</p> -->
    <!-- <div class="detail-box" v-if="!$route.meta.hideDetails">
      <div class="pic">
        <img :src="detailData.avatar ? detailData.avatar : require('@/assets/img/drone1.jpg')" alt="">
      </div>
      <div class="word">
        <h3 class="title">
          {{ detailData.name }} <i class="el-icon-edit-outline edit" @click="updateBase" />
          <el-button class="back" type="text" icon="el-icon-right" @click="$router.push({ path: '/gamemodel' })" />
        </h3>
        <p class="hint">{{ detailData.desc }}</p>
        <div class="alick-handle-btns">
          <a class="handle-btn" href="javascript:;" @click="addModelVersion">新增版本</a>
        </div>
      </div>
    </div> -->

    <div class="detail-box">
      <div class="rollback" @click="$router.push('/gameModel')">
        <img src="~@/assets/img/prev.png" alt="">
        <span>返回</span>
      </div>

      <div class="code-description">
        <div class="code-desc-header">
          <div class="title">
            <div class="title-header">
              <span>{{ detailData.name }}</span>
              <!-- <i class="el-icon-edit-outline alick-btn-edit" @click="updateBase" /> -->
            </div>

            <div class="code-tags">
              <div class="user-tag tag">
                <img src="~@/assets/img/user.png" alt="">
                {{
                  detailData.create_user && (detailData.create_user.nick_name ||
                    detailData.create_user.username)
                }}
              </div>

              <div class="version-tag tag">
                <div class="ver-title">
                  <img src="~@/assets/img/branch.png" alt="">
                  <span>版本 {{ version.version }}</span>
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </div>
                <div class="content">
                  <div class="ver-item" v-for="item in versionOptions" :key="item.id" @click="dropdownChange(item)">
                    {{ item.version }}
                  </div>
                </div>
              </div>

              <div class="time-tag tag">
                <span>开始时间：</span>
                {{ detailData.create_time }}
              </div>

              <div class="time-tag tag">
                <span>更新时间：</span>
                {{ detailData.update_time }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="alick-handle-btns">
        <el-button class="handle-btn" type="primary" size="medium" @click="toSource"
          v-show="detailData && detailData.business_id">
          来源
        </el-button>

        <el-button class="handle-btn" type="success" size="medium" @click="addModelVersion">
          新增版本
        </el-button>


      </div>

    </div>

    <!-- <div class="select-ver clearfix">
      <span class="label">版本</span>
      <el-select class="select" v-model="version" value-key="id" @change="versionChange">
        <el-option v-for="item in versionOptions" :value="item" :label="item.version" :key="item.id">
        </el-option>
      </el-select>
    </div>
    <p class="commit-info">
      <strong>提交信息</strong>
    </p> -->

    <!-- <el-radio-group v-model="nowRouter" size="medium" @change="skip" class="nav-alike" v-show="!$route.meta.hideDetails">
      <el-radio-button :label="e.name" v-for="(e, i) in thisRouter" :key="i">
        <span class="nav-alike-item">{{ e.meta.title }}</span>
      </el-radio-button>
    </el-radio-group> -->

    <div class="tabs-left" v-if="thisRouter.length > 1">
      <el-tabs v-model="nowRouter" @tab-click="skip" v-show="!$route.meta.hideDetails">
        <el-tab-pane :label="e.meta.title" :name="e.name" v-for="(e, i) in thisRouter" :key="i" />
      </el-tabs>
    </div>

    <!-- <div class="tabs-box">
      <el-tabs v-model="nowRouter" @tab-click="skip" v-show="!$route.meta.hideDetails">
        <el-tab-pane :label="e.meta.title" :name="e.name" v-for="(e, i) in thisRouter" :key="i" />
      </el-tabs>
    </div> -->

    <!-- <div class="select-ver clearfix">
      <span class="label">版本</span>
      <el-select class="select" v-model="version" value-key="id" @change="versionChange">
        <el-option v-for="item in versionOptions" :value="item" :label="item.version" :key="item.id">
        </el-option>
      </el-select>
    </div>
    <p class="commit-info">
      <strong>提交信息</strong>
    </p> -->

    <div :class="['layout-content', { 'layout-content-nodetail': $route.meta.hideDetails }]">
      <router-view class="content-detail" :detailData="detailData" v-if="version" :version="version"
        @getDetail="getDetail" />
    </div>

    <!-- <el-form class="form myself-form" ref="modelForm" :model="modelForm" :rules="modelSubmitRules" label-width="120px">
      <el-dialog :visible.sync="showModelDialog" title="模型" width="840px">
        <el-form-item label="范围" prop="visibility">
          <el-radio-group v-model="modelForm.visibility">
            <el-radio :label="0">私有的</el-radio>
            <el-radio :label="1">共享的</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input type="text" v-model="modelForm.name" />
        </el-form-item>
        <el-form-item label="别名" prop="alias">
          <el-input type="text" v-model="modelForm.alias" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input type="textarea" :rows="3" v-model="modelForm.desc" />
        </el-form-item>
        <el-form-item label="配图">
          <media-uploader accept=".jpg,.jpeg,.png,.JPG,.JPEG" :src="modelForm.avatar" @avatarPath="avatarPath" />
        </el-form-item>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="commitModel">确定</el-button>
          <el-button class="none-type" @click="cancelModel">取消</el-button>
        </span>
      </el-dialog>
    </el-form> -->

  </v-layout>
</template>

<script>
// import plugState from '@/components/module/plug-state'
import { getModelDetail } from '@/api/model'
import { getMarketModelBySource } from '@/api/marketModel'
import { getAllModelVersions } from '@/api/modelversion'
export default {
  data() {
    return {
      nowRouter: this.$route.name,
      thisRouter: [],
      detailData: {},
      model_id: this.$route.query.id,
      version_id: this.$route.query.version_id,
      version: null,
      versionOptions: [],
      showModelDialog: false,
      modelForm: {},
      modelSubmitRules: {
        name: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 40, message: "长度在1到40个字符" },
        ],
        alias: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 5, max: 40, message: "长度在1到40个字符" },
        ],
        desc: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
        ],
      },
    };
  },
  methods: {
    skip() {
      let path = `/gameModel/${this.thisRouter.filter(e => e.name == this.nowRouter)[0].path}`
      if (path == this.$route.path) return
      this.$router.push({
        path,
        query: {
          id: this.$route.query.id
        }
      })
    },

    toSource() {
      this.$router.push({ path: '/gameExperiment/code', query: { id: this.detailData.business_id } })
    },

    async exportMarketModel() {
      console.log(this.version)
      if (!this.version || !this.version.id) {
        alert('没有版本')
        return
      }
      let data = {
        source: this.detailData.id
      }
      console.log(this.detailData)

      let res = await getMarketModelBySource(data);
      let market_model_id = null
      console.log("res", res)
      if (res && res.data) {
        if (res.data.length > 0) {
          market_model_id = res.data.id
        }
      }
      console.log("res2", res)
      let query = {
        model_version_id: this.version.id,
        market_model_id: market_model_id
      }
      console.log("query", query)
      this.$router.push({
        path: '/market/modeldetail',
        query
      })
    },

    async getModelVersions() {
      let ret = await getAllModelVersions({ model_id: this.$route.query.id })
      this.versionOptions = ret.data

      if (this.versionOptions.length > 0) {
        this.version = this.versionOptions[0]
      }

      if (this.version_id) {
        for (let model_version of this.versionOptions) {
          console.log('modelversion', model_version)
          if (model_version.id == this.source_version_id) {
            this.version = model_version
            break
          }
        }
      }
    },
    dropdownChange(val) {
      this.version = val;
      this.versionChange()
    },
    versionChange() {
      console.log('version', this.version)
    },
    async getDetail() {
      console.log("model_id", this.model_id, this.$route.query.id)

      if (this.model_id) {
        let res = await getModelDetail({ id: this.$route.query.id })
        this.detailData = res.data
      }

    },

    avatarPath(data) {
      this.modelForm.avatar = data;
    },
    // updateBase() {
    //   this.showModelDialog = true
    //   this.modelForm = JSON.parse(JSON.stringify(this.detailData))
    // },
    // commitModel() {
    //   this.$refs.modelForm.validate(async (valid) => {
    //     if (valid) {
    //       await putModel(this.modelForm)
    //       this.detailData = JSON.parse(JSON.stringify(this.modelForm))
    //       this.showModelDialog = false
    //     }
    //   })
    // },
    // cancelModel() {
    //   this.showModelDialog = false
    // },
    addModelVersion() {
      let query = {
        model_id: this.detailData.id,
      }
      this.$router.push({
        path: '/gameModel/detail',
        query
      })
    }
  },
  // components: { plugState },
  mounted() {
    let temp = this.$router.options.routes.filter(
      e => e.name == 'gameModel' && e.children
    )
    this.thisRouter = temp[0].children.filter(e => !e.meta.hideDetails)
    this.getDetail()
    this.getModelVersions()
  },

  destroyed() {

  },
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-layout.less";

.el-dropdown-link {
  border: 1px solid rgba(#808080, .5);
  padding: 5px 10px;
  border-radius: 10px;
  position: relative;
  padding-left: 28px;
  background: #eee;
  top: 3px;

  span::before {
    content: "";
    width: 16px;
    height: 16px;
    background: url(~@/assets/img/branch.png) no-repeat center;
    background-size: cover;
    margin-top: 3px;
    position: absolute;
    left: 6px;
    top: 4px;
  }
}
</style>